<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
<table>
    <a href="/user/insert">新增</a>
    <thead >
    <tr>
        <th>用户名</th>
        <th>年龄</th>
        <th>日期</th>
    </tr>
    </thead>
    <tbody id="tbody">

    </tbody>

<!--    <tbody>-->
<!--    <tr th:each="item:${list}">-->
<!--       <td th:text="${item.name}"></td>-->
<!--        <td th:text="${item.age}"></td>-->
<!--        <td th:text="${item.day}"></td>-->
<!--        <td><button>删除</button><button>修改</button></td>-->
<!--    </tr>-->
<!--    </tbody>-->
</table>
<script>
    function initData() {
        $.ajax({
            url: "/user/pageInfos",
            type: "post",
            data: {
                pageSize:5,
                pageNum: 1
            },
            success(res) {
                console.log(res)
                if (res.success) {
                    for (var item of res.result.list)
                        $("#tbody").append(`
                    <tr>
                    <td>${item.id}</td>
                     <td>${item.name}</td>
                     <td>${item.age}</td>
                      <td>${item.day}</td>
                      <td><a href="/user/update?id=${item.id}">修改</a></td>
                            <td><button onclick="del(${item.id})">删除</button></td>
                     </tr>
                    `)
                } else {
                    alert(res.mes)
                }
            }
        })
    }
    initData()

    function del(id){
        $.ajax({
            url : "/user/delete",
            type : "post",
            data: {
                id
            },
            success(res){
                if (res.success) {
                    //删除成功跳回
                    alert(res.msg)
                    $('#tbody').html('')
                    initData()
                } else {
                    alert(res.msg);
                }
            }
        })
    }

</script>
</body>
</html>

